<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="订单号" label-width="70px">
              <el-input v-model="tableSearchParam.orderNo" style="width:200px" size="small"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="index"
            width="35">
          </el-table-column>
          <el-table-column
            label="订单号"
            property="orderNo"
            >
          </el-table-column>
          <el-table-column
            label="支付金额"
            property="payAmount"
            >
          </el-table-column>
          <el-table-column
            label="支付时间"
            property="payTime"
            >
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              {{scope.row.payStatus=='1'?'支付成功':'支付失败'}}
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss">
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .img-tip {
    color: #c5bebe;
    font-size: 12px
  }

  #divcss5 {
    margin: 0px auto
  }

  #divcss5 img {
    border-radius: 50%
  }
</style>

<script>
  import payRecordApi from '@/api/payRecordApi'

  export default {
    created() {
      this.p1 = this.permissionValid.validAction(this.permissionValid.permissionRule.user.addUser)
      this.p2 = this.permissionValid.validAction(this.permissionValid.permissionRule.user.updateUser)
      this.p3 = this.permissionValid.validAction(this.permissionValid.permissionRule.user2role.saveUser2Role)
      this.p4 = this.permissionValid.validAction(this.permissionValid.permissionRule.user.removeUser)
      this.p5 = this.permissionValid.validAction(this.permissionValid.permissionRule.user.updatePassword)
      this.initData()
    },
    data() {
      return {
        activeName: '1',
        dialogServiceFormVisible: false,
        serviceUser: {
          userRole: '',
          idCards: [],
          applicants: {},
          drivingLience: {},
          driverLience: {}
        },
        p1: false,
        p2: false,
        p3: false,
        p4: false,
        p5: false,
        title: ['未分配角色', '已分配角色'],
        noSelectRole: [],
        selectRole: [],
        allData: [],
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          name: '',
          telphone: ''
        },
        treeData: [],
        treeSearchInputValue: '',
        treeSearchParam: {},
        defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf: 'leaf'
        },
        loading: false,
        actionType: '',
        defaultExpandedKeys: [],
        multipleSelection: [],
        dialogFormVisible: false,
        formLabelWidth: '80px',
        updatePasswordData: {
          id: '',
          oldPassword: '',
          newPassword: '',
          comfirmPassword: ''

        },
        userId: '',
        dialogRoleFormVisible: false,
      }
    },
    methods: {
      initData() {
        this.listTableData()

      },
      listTableData() {
        payRecordApi.list(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
        }, () => {
        })
      }
    }
  }
</script>
